<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../admin/css/admin.css" />
	</head>

	<body>
		<div class="page-content-wrap">
				<form class="layui-form" id="goods-UpdateFrom" >
					<div class="layui-tab" style="margin: 0;">
						<ul class="layui-tab-title">
							<li><a href="../admin/goods">商品列表</a></li>
							<li class="layui-this">编辑商品信息</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item"></div>
							<div class="layui-tab-item layui-show">
								<input type="text" name="pageNum"  style="display: none;" th:value="${session.goodsPageNum}"  >
								<input type="text" name="id"  style="display: none;" th:value="${goods.id}" >

								<div class="layui-form-item">
									<label class="layui-form-label">商品标题：</label>
									<div class="layui-input-block">
										<input type="text" name="title" th:value="${goods.title}" required lay-verify="title" placeholder="请输入商品标题" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品首图：</label>
									<div>
										<input type="text" name="image" id="imageText" th:value="${goods.image}" style="display: none;">
										<img th:src="${goods.image}" width="50" height="50" onclick="updHeaderUrl()" title="点击修改首图" id="image">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品价格：</label>
									<div class="layui-input-block">
										<input type="text" name="price" th:value="${goods.price}" required lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品分类：</label>
									<div class="layui-input-block">
										<select name="cid" lay-verify="required">
											<option value="">请选择商品分类</option>
											<optgroup label="请选择商品分类"  >
												<option  th:each="category:${categorys}"  th:if="${category.pid!=0 }"  th:selected="${category.id==goods.cid}" th:value="${category.id}" th:text="${category.name}"></option>
											</optgroup>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品状态：</label>
									<div class="layui-input-block">
										<select name="isputaway" lay-verify="required">
											<option value="">请选择商品状态</option>
											<optgroup  label="请选择商品状态">
												<option value="true" th:selected="${goods.isputaway}" >上架</option>
												<option  value="false" th:selected="${goods.isputaway==false}" selected >下架</option>

											</optgroup>
										</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">商品库存：</label>
									<div class="layui-input-block">
										<input type="text" name="repertory" th:value="${goods.repertory}" required lay-verify="required" placeholder="请输入商品库存" autocomplete="off" class="layui-input">
									</div>
								</div>
								<center><p style="font-size: 18px;margin-top: 15px;margin-bottom: 10px"></p>商品分支信息</center>
								<div id="goods-add">
									<div class="layui-form-item" th:each="goodsBo:${goods.goodsBos}" th:id="${'divbo'+goodsBo.id}">
										<label class="layui-form-label">商品分支颜色：</label>
										<div class="layui-input-block">
											<input type="text" name="type" th:value="${goodsBo.type}" style="width: 40%"  th:id="bo" required lay-verify="required" placeholder="请输入商品分支颜色" autocomplete="off" class="layui-input">
										</div>
										<label class="layui-form-label" style="float: right;margin-right: 300px;margin-top: -40px">商品分支图片：</label>
										<div  class="layui-input-block" style="float: right;margin-right: -210px;margin-top: -40px">
											<input type="text" name="imageBo" th:id="${'bo'+goodsBo.id+'Imagetext'}" style="display: none;"  th:value="${goodsBo.image}">
											<img th:src="${goodsBo.image}" width="50" height="50" onclick="uploadFileBo(this.id)" title="点击修改首图" th:id="${'bo'+goodsBo.id+'Image'}" >
											<button th:id="${'bo'+goodsBo.id+'DeleteBo'}"   type="button" style="width: 90px;height: 40px;background-color: #90D7EC;border: 0;color: red;right: -130px;float: right;position: absolute;" onclick="deleteBo(this.id)" value="">删除该分支</button>
										</div>
									</div>
								</div>


							</div>
						</div>
					</div>
					<div class="layui-form-item" style="padding-left: 10px;">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="user-edit-from">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							<button class="layui-btn layui-btn-normal" style="color: red;margin-left: 40px" type="button" onclick="addBo()">添加商品分支</button>

						</div>
					</div>
				</form>
			<input type="file" style="display: none;" id="file" />
			<input type="file" style="display: none;" onchange="uploadBoChage()" id="fileBo" />
		</div>
		<script type="text/javascript">
			var SCOPE = {
				static: '/static',
				index: '/admin/category/index.html',
				add: 'add.html',
				save: '/admin/category/save.html',
				edit: 'add.html',
				updateEdit: '/admin/category/updateedit.html',
				status: '/admin/category/updatestatus.html',
				del: '/admin/category/del.html',
				delAll: '/admin/category/deleteall.html',
				listOrderAll: '/admin/category/listorderall.html'
			}
		</script>
		<script src="../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-1.12.4.min.js"></script>
		<script>

			function deleteBo(id) {
				id = id.substring(0,id.length-8)
				var node = document.getElementById('div'+id)
				node.parentNode.removeChild(node)

			}
			
			layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'dialog',  'element', 'upload', 'layedit'], function() {
				var form = layui.form(),
					layer = layui.layer,
					$ = layui.jquery,
					laypage = layui.laypage,
					laydate = layui.laydate,
					layedit = layui.layedit,
					element = layui.element(),
					dialog = layui.dialog;

				form.verify({
					title: function(value) {
						if(value.length <20) {
							return '商品标题必须得20长度以上';
						}
					}
				});

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');

				//监听信息提交
				form.on('submit(user-edit-from)', function(data){
					var image = data.field.image
					var pageNum = data.field.pageNum
					if (image==null || image==''){
						layer.msg('请上传首图！！');
						return false;
					}
					var type = data.field.type
					if (type==null || type==''){
						layer.msg('添加商品分支信息！！');
						return false;
					}
					$.ajax({
						//几个参数需要注意一下
						type: "POST",//方法类型
						url: '../admin/goods/update' ,//url
						data: $('#goods-UpdateFrom').serialize(),
						success: function (result) {
							if (result=='ok'){
								window.location.replace("../admin/goods?pageNum="+pageNum)
							}
						}
					});
					return false;
				});
			});


			$(function () {
				$("#file").change(function () {
					//选择文件
					var filePath = $("#file").val();
					filePath = filePath.toUpperCase();
					//设置上传文件类型
					if (filePath.indexOf(".JPG") != -1 || filePath.indexOf(".BMP") != -1 || filePath.indexOf(".PNG") != -1 || filePath.indexOf(".GIF") != -1 || filePath.indexOf(".JPEG") != -1) {
						var form = new FormData();
						form.append('file', $('#file')[0].files[0]);
						//上传文件
						$.ajax({
							url: '../admin/user/upload',
							type: 'post',
							data: form,
							cache: false,
							//阻止Ajax将参数转成成String类型的键值对，需要设置processData属性为false，
							processData: false,
							//form的enctype="multipart/form-data"才能上传文件。Ajax的默认编码方式是application/x-www-form-urlencoded
							contentType: false,

							success: function (data) {
								if(data!=null){
									$("#imageText").val(data)
									$("#image").attr("src", data)
									$("#uplBu").hide()
									$("#image").show()
								}else{
									layer.msg('修改头像异常！！');
								}


							}
						});
					} else {
						layer.msg('请选择正确的文件格式！！');
						return false;
					}
				})
			})
			function updHeaderUrl() {
				document.getElementById("file").click();
			}


			function uploadFileBo(id) {
				sessionStorage.setItem("id",id)
				document.getElementById("fileBo").click();

			}

			function uploadBoChage() {
                //选择文件
                var filePath = $("#fileBo").val();
                filePath = filePath.toUpperCase();
                //设置上传文件类型
                if (filePath.indexOf(".JPG") != -1 || filePath.indexOf(".BMP") != -1 || filePath.indexOf(".PNG") != -1 || filePath.indexOf(".GIF") != -1 || filePath.indexOf(".JPEG") != -1) {
                    var form = new FormData();
                    form.append('file', $('#fileBo')[0].files[0]);
                    //上传文件
                    $.ajax({
                        url: '../admin/user/upload',
                        type: 'post',
                        data: form,
                        cache: false,
                        //阻止Ajax将参数转成成String类型的键值对，需要设置processData属性为false，
                        processData: false,
                        //form的enctype="multipart/form-data"才能上传文件。Ajax的默认编码方式是application/x-www-form-urlencoded
                        contentType: false,
                        success: function (data) {
                            if(data!=null){
								var id = sessionStorage.getItem("id")
								if (id.indexOf("Image")!=-1){
									id = id.substring(0,id.length-5)
									document.getElementById(id+'Imagetext').value=data
									document.getElementById(id+'Image').src=data
								}else{
									id = id.substring(0,id.length-2)
									document.getElementById(id+'Imagetext').value=data
									document.getElementById(id+'Image').src=data
									document.getElementById(id+"Im").setAttribute("hidden",true);
									document.getElementById(id+'Image').style.display="";
								}

                            }else{
                                layer.msg('修改头像异常！！');
                            }


                        }
                    });
                } else {
                    layer.msg('请选择正确的文件格式！！');
                    return false;
                }
            }

			function addBo() {
						id = 'bo'+Math.random()
						var divId = 'div'+id
						$("#goods-add").append('<div class="layui-form-item" id="div'+id+'">\n' +
								'\t\t\t\t\t\t\t\t\t\t<label class="layui-form-label">商品分支颜色：</label>\n' +
								'\t\t\t\t\t\t\t\t\t\t<div class="layui-input-block">\n' +
								'\t\t\t\t\t\t\t\t\t\t\t<input type="text" name="type" style="width: 40%"  id="'+id+'" required lay-verify="required" placeholder="请输入商品分支颜色" autocomplete="off" class="layui-input">\n' +
								'\n' +
								'\t\t\t\t\t\t\t\t\t\t</div>\n' +
								'\t\t\t\t\t\t\t\t\t\t<label class="layui-form-label" style="float: right;margin-right: 300px;margin-top: -40px">商品分支图片：</label>\n' +
								'\t\t\t\t\t\t\t\t\t\t<div  class="layui-input-block" style="float: right;margin-right: -210px;margin-top: -40px">\n' +
								'\t\t\t\t\t\t\t\t\t\t\t<input type="text" name="imageBo" id="'+id+'Imagetext" style="display: none;">\n' +
								'\t\t\t\t\t\t\t\t\t\t\t<img src="" width="50" height="50" onclick="uploadFileBo()" title="点击修改首图" id="'+id+'Image" style="display: none;float: right;">\n' +
								'\t\t\t\t\t\t\t\t\t\t\t<button id="'+id+'Im" type="button" style="width: 80px;height: 40px;background-color: #90D7EC;border: 0;color: white" onclick="uploadFileBo(this.id)" value="">上传分支图片</button>\n' +
								'\t\t\t\t\t\t\t\t\t\t\t<button id="'+id+'DeleteBo"   type="button" style="width: 90px;height: 40px;background-color: #90D7EC;border: 0;color: red;right: -130px;float: right;position: absolute;" onclick="deleteBo(this.id)" value="">删除该分支</button>\n'+
								'\t\t\t\t\t\t\t\t\t\t</div>\n' +
								'\t\t\t\t\t\t\t\t\t</div>')
			}



		</script>
	</body>

</html>